<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>流程节点表单配置</title>
<script src="${ctx}/static/selectWin/roleSelector.js?version=${applicationScope.jsVersion }" type="text/javascript"></script>
<script type="text/javascript">
	var $grid;
	$(function() {
		$grid = $("#grid").datagrid($.extend(datagridOption, {
			url : "${ctx}/bpm/confForm/dataGrid?search_EQ_bpmConfNode.id=${bpmConfNodeId}",
			columns : [ [ {
				field : 'ck',
				checkbox : true
			}, {
				field : 'bpmConfNode',
				title : '所属流程节点',
				formatter : function(value, row, index) {
					return value ? value.name : "";
				}
			}, {
				field : 'formTemplateName',
				title : '表单',
				formatter : function(value, row, index) {
					return row.type == 0 ? value : row.value;
				}
			}, {
				field : 'type',
				title : '类型',
				formatter : function(value, row, index) {
					return value == 0 ? "内部表单" : "外部表单";
				}
			}, {
				field : 'status',
				title : '配置方式',
				formatter : function(value, row, index) {
					return value == 0 ? "读取BPM XML文件" : (value == 1 ? "通过流程表单配置" : "");
				}
			}, {
				field : 'assigneeType',
				title : '指定接收人类型',
				formatter : function(val, row, index) {
					if (val == 0) {
						return '不指定';
					}
					if (val == 1) {
						return '角色';
					}
					if (val == 2) {
						return 'url';
					}
					if (val == 3) {
						return 'Grid';
					}
				}
			} ] ]
		}));
		$("#roleSelector").click(function() {
			var assigneeType = $("#assigneeType").combo("getValue");
			var typeName = $("#assigneeType").combo("getText");
			if (assigneeType == 1) {
				$.easyui.showGridSelector($.extend(roleSelectOpts, {
					multiple : false,
					singleSelect : true,
					onEnter : function(val) {
						if (val) {
							$("#fm").form("load", {
								"assigneeValue" : val.roleNo,
								"remark" : typeName + ":" + val.roleName
							});
						}
					}
				}));
			} else {
				showAlert("您选择的类型不是角色类型，无法添加角色");
			}
		});
		$("#backRoleSelector").click(function() {
			var assigneeType = $("#backAssigneeType").combo("getValue");
			var typeName = $("#backAssigneeType").combo("getText");
			if (assigneeType == 1) {
				$.easyui.showGridSelector($.extend(roleSelectOpts, {
					multiple : false,
					singleSelect : true,
					onEnter : function(val) {
						if (val) {
							$("#fm").form("load", {
								"backAssigneeValue" : val.roleNo,
								"remark" : typeName + ":" + val.roleName
							});
						}
					}
				}));
			} else {
				showAlert("您选择的类型不是角色类型，无法添加角色");
			}
		});
		$("#add").click(function() {
			$("#fm").form("clear");
			$("#fm").form("load", {
				"bpmConfNode.id" : $("#bpmConfNodeId").val(),
				"type" : 0
			});
			$("#dlg").dialog("open").dialog("setTitle", "新增");
		});
		$("#delete").click(function() {
			GridDelete("#grid", "${ctx}/bpm/confForm/delete");
		});
		$("#edit").click(function() {
			var rowData = $grid.datagrid("getSelected");
			if (rowData == null) {
				$.messager.show({
					msg : "您未选中行，无法编辑",
					icon : "warning",
					position : "bottomRight"
				});
			} else {
				$("#dlg").dialog("open").dialog("setTitle", "编辑");
				if (rowData.assigneeType == 0) {
					$('#assigneeValue').attr('readonly', 'readonly');
				} else if (rowData.assigneeType == 1) {
					$('#assigneeValue').attr('readonly', 'readonly');
				} else if (rowData.assigneeType == 2) {
					$('#assigneeValue').attr('readonly', null);
				}
				if (rowData.backAssigneeType == 0) {
					$('#backAssigneeValue').attr('readonly', 'readonly');
				} else if (rowData.backAssigneeType == 1) {
					$('#backAssigneeValue').attr('readonly', 'readonly');
				} else if (rowData.backAssigneeType == 2) {
					$('#backAssigneeValue').attr('readonly', null);
				}
				$("#fm").form("clear");
				$("#fm").form("load", $.extend(rowData, {
					"bpmConfNode.id" : $("#bpmConfNodeId").val(),
					"formTemplateId" : rowData.type == 0 ? rowData.value : "",
					"formUrl" : rowData.type == 1 ? rowData.value : ""
				}));
			}
		});
	});
	function fn_save() {
		var formData = $("#fm").form("getData");
		if (formData && formData.type == 0) {
			if (formData.formTemplateId == "") {
				showMsg("表单类型为内部时，表单模板不能为空");
				return false;
			}
			$("#value").val(formData.formTemplateId);
		} else if (formData && formData.type == 1) {
			if (formData.formUrl == "") {
				showMsg("表单类型为外部时，表单模板不能为空");
				return false;
			}
			$("#value").val(formData.formUrl);
		}
		$("#fm").form("submit", {
			url : "${ctx}/bpm/confForm/update",
			success : function(data) {
				$grid.datagrid("load");
				$.messager.show({
					msg : data.msg,
					icon : "info",
					position : "bottomRight"
				});
				$("#dlg").dialog('close');
			}
		});
	}
</script>
</head>
<body>
	<div data-options="region:'center',fit:true,border:false">
		<table id="grid">
		</table>
	</div>
	<div id="tt" class="easyui-toolbar">
		<input type="hidden" id="bpmConfNodeId" value="${bpmConfNodeId}" /> <a id="add" class="easyui-linkbutton"
			data-options="plain: true, iconCls: 'icon-standard-add'">新增</a> <a id="edit" class="easyui-linkbutton"
			data-options="plain: true, iconCls: 'icon-hamburg-pencil'">编辑</a> <a id="delete" class="easyui-linkbutton"
			data-options="plain: true, iconCls: 'icon-hamburg-busy'">删除</a>
	</div>
	<div id="dlg" class="easyui-dialog" style="width: 460px; height: 360px; padding: 10px 20px"
		data-options="iconCls:'icon-save',resizable:true,modal:true,inline:false, buttons:[
                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
                ],closed:true">
		<form id="fm" method="post">
			<input type="hidden" name="id" /> <input type="hidden" id="value" name="value" /> <input type="hidden" name="bpmConfNode.id" />
			<table id="tbl">
				<tr>
					<td>表单模板[内部]:</td>
					<td><select id="formTemplateId" name="formTemplateId" class="easyui-combobox" style="width: 150px">
							<c:forEach items="${formTemplateList}" var="ft">
								<option value="${ft.id}">${ft.name }[${not empty ft.type?ft.type.codeValue:''}]</option>
							</c:forEach>
					</select></td>
				</tr>
				<tr>
					<td>表单URL[外部]:</td>
					<td><input id="formUrl" name="formUrl"></td>
				</tr>
				<tr>
					<td>表单标题:</td>
					<td><input id="formTitle" name="formTitle"></td>
				</tr>
				<tr>
					<td>指定接收人类型:</td>
					<td><select class="easyui-combobox" id="assigneeType" name="assigneeType"
						data-options="onChange: function(newValue, oldValue){
				        	if(newValue==0){
				        		 $('#assigneeValue').attr('readonly','readonly'); 
				        		 $('#assigneeValue').val('');
				        	}else if(newValue==1){ 
				        		$('#assigneeValue').attr('readonly','readonly'); 
				        		$('#assigneeValue').val('');
				        	}else if(newValue==2){
				        	 	 $('#assigneeValue').attr('readonly',null); 
				        	 	 $('#assigneeValue').val('');
				        	}
						}"
						style="width: 150px;">
							<option value="0">不指定</option>
							<option value="1">角色</option>
							<option value="2">Url</option>
							<option value="3">Grid</option>
					</select></td>
				</tr>
				<tr>
					<td>指定接收人:</td>
					<td><input id="assigneeValue" name="assigneeValue"><a id="roleSelector" class="easyui-linkbutton easyui-tooltip"
						data-options="plain: true, iconCls: 'icon-cologne-order-1',content:'选取角色'"></a></td>
				</tr>
				<tr>
					<td>返回指定接收人类型:</td>
					<td><select class="easyui-combobox" id="backAssigneeType" name="backAssigneeType"
						data-options="onChange: function(newValue, oldValue){
				        	if(newValue==0){
				        		 $('#backAssigneeValue').attr('readonly','readonly'); 
				        		 $('#backAssigneeValue').val('');
				        	}else if(newValue==1){ 
				        		$('#backAssigneeValue').attr('readonly','readonly'); 
				        		$('#backAssigneeValue').val('');
				        	}else if(newValue==2){
				        	 	 $('#backAssigneeValue').attr('readonly',null); 
				        	 	 $('#backAssigneeValue').val('');
				        	}
						}"
						style="width: 150px;">
							<option value="0">不指定</option>
							<option value="1">角色</option>
							<option value="2">Url</option>
							<option value="3">Grid</option>
					</select></td>
				</tr>
				<tr>
					<td>返回指定接收人:</td>
					<td><input id="backAssigneeValue" name="backAssigneeValue"><a id="backRoleSelector" class="easyui-linkbutton easyui-tooltip"
						data-options="plain: true, iconCls: 'icon-cologne-order-1',content:'选取角色'"></a></td>
				</tr>
				<tr>
					<td>表单提交前过程</td>
					<td><input id="beforePostUrl" name="beforePostUrl"></td>
				</tr>
				<tr>
					<td>表单提交后过程:</td>
					<td><input id="afterPostUrl" name="afterPostUrl"></td>
				</tr>
				<tr>
					<td>表单类型:</td>
					<td><input type="radio" id="type0" name="type" value="0" checked> <label for="type0">内部</label> <input type="radio"
						id="type1" name="type" value="1"> <label for="type1">外部</label></td>
				</tr>
				<tr>
					<td>备注:</td>
					<td><input type="text" name="remark" class="easyui-textbox" data-options="multiline:true" style="width:200px;height:100px"> </td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>
